{extend name="base" /}
{block name="css"}
<link rel="stylesheet" href="https://paidou.cdn.dgyunju.cn/css/contact.css">
<link rel="stylesheet" href="https://paidou.cdn.dgyunju.cn/fonts/iconfont.css">
<style>
    a{
        color: black;
    }
</style>
{/block}
{block name="content"}
<div id="container">
    <div id="header"></div>
    <div id="rightside"></div>
    <div id="content">
        <div class="content-top">
            <h3 class="contact-us">{:lang('contact_us')}</h3>
            <p>{:lang('contact_us_info')}</p>
        </div>
        <div class="form-coup">
            <input class="input-coup name" type="text" placeholder="{:lang('name')}">
            <input class="input-coup phone" type="text" placeholder="{:lang('phone')}">
            <input class="input-coup email" type="text" placeholder="{:lang('email')}">
            <input class="input-coup company" type="text" placeholder="{:lang('company')}">
            <select class="select-coup">
                <option>{:lang('application_area')}</option>
                {foreach $application as $a}
                    <option value="{$a}">{$a}</option>
                {/foreach}
            </select>
            <!--省份选择-->
            <div class="select-all">
                <select class="select-one" id="prov" >
                    <option value="">={:lang('Please select a province')}=</option>
                </select>
                <!--城市选择-->
                <select class="select-one"  id="city" >
                    <option value="">={:lang('Please select a city')}=</option>
                </select>
                <!--县区选择-->
                <!-- <select class="select-one"  id="country" onchange="selecCountry(this)">
                        <option>=请选择县区=</option>
                </select> -->
            </div>
        </div>
        <div class="text-area">
            <textarea class="talk-about" placeholder="{:lang('message')}" name="" id="" cols="30" rows="10"></textarea>
        </div>
        <button class="btn">{:lang('submit')}</button>
        <div class="contact">
            <h3 class="top">
                联系方式
            </h3>
            <div class="center-group">
                <div class="left">
                    <div class="center-top">
                        <i class="fi fi-telphone-fill"></i>
                        <div>{:lang('phone')}</div>
                    </div>
                    <div class="top-group">
                        <div>{:lang('tel')}：<a href="tel:{$config['tel']}">{$config['information_phone']}</a></div>
                        <div>{:lang('technical_support_phone')}：<a href="tel:{$config['technical_support_phone']}">{$config['technical_support_phone']}</a></div>
                        <div>{:lang('server_phone')}：<a href="tel:{$config['server_phone']}">{$config['server_phone']}</a></div>
                    </div>
                </div>
                <div class="left">
                    <div class="center-top">
                        <i class="fi fi-youxiang"></i>
                        <div>{:lang('email')}</div>
                    </div>
                    <div class="top-group">
                        <div>{:lang('sale_email')}：<a href="mailto:$config['sale_email']">{$config['sale_email']}</a></div>
                        <div>{:lang('customer_server_email')}：<a href="mailto:$config['customer_server_email']">{$config['customer_server_email']}</a></div>
                    </div>
                </div>
                <div class="left">
                    <div class="center-top">
                        <i class="fi fi-dizhi"></i>
                        <div>{:lang('address')}</div>
                    </div>
                    <div class="top-group">
                        <div>
                            <a style="color: black" target="_blank" href="http://uri.amap.com/marker?position={$config['position']}&name={$config['address']|default=''}&coordinate=gaode&callnative=1">	<li>
                            {:lang('RD_center')}：{$config['address']}
                            </a>
                        </div>
                        <div>
                            <a style="color: black" target="_blank"  href="http://uri.amap.com/marker?position={$config['product_position']}&name={$config['address']|default=''}&coordinate=gaode&callnative=1">	<li>
                            {:lang('product_address')}：{$config['product_address']}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
{/block}
{block name="script"}
<script>
    $(document).ready(function(){
        const prov = $('.select-all #prov');
        const city = $('.select-all #city');
        const country = $('.select-all #country');
        const name=$('.form-coup .name');
        const phone=$('.form-coup .phone');
        const email=$('.form-coup .email');
        const company=$('.form-coup .company');
        const selectCoup=$('.form-coup .select-coup');
        const textarea=$('.text-area .talk-about')
        /*用于保存当前所选的省市区*/
        let current = {
            prov: '',
            city: '',
            country: ''
        }
        let lang = "{$lang}";
        if (lang !='zh-cn'){
            $("#city").hide();
        }
        $.ajax({
            url: '__DOMAIN__/api/area',
            type: 'get',
            data: {lang:lang},
            dataType: 'json',
            success: function (res) {
                const list=res.data
                list.forEach((i,v)=>{
                    let provOpt = document.createElement('option');
                    provOpt.innerText = i.name;
                    provOpt.value = i.name
                    prov.append(provOpt);
                })
                prov.on("change", function () {
                    if (lang !='zh-cn'){
                        return
                    }
                    $('.select-all #city option').remove()
                    let textA=prov.val()
                    list.forEach(i=>{
                        if(i.name===textA){
                            i.children.forEach(i2=>{
                                let provOpt = document.createElement('option');
                                provOpt.innerText = i2.name;
                                provOpt.value = i2.name
                                city.append(provOpt)
                            })
                        }
                    })
                });
            },
        })
        $('.btn').on('click',function(){
            if(!name.val()){
                alert("{:lang('Please fill in your name first')}")
                return
            }

            const payload={
                name:name.val(),
                tel:phone.val(),
                email:email.val(),
                company:company.val(),
                application:selectCoup.val(),
                area:`${prov.val()},${city.val()}`,
                details:textarea.val(),
                lang:'{$lang}'
            }
            $.ajax({
                url: '__DOMAIN__/api/connect',
                type: 'post',
                data: payload,
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if(res.code =='200'){
                        name.val('')
                        phone.val('')
                        email.val('')
                        company.val('')
                        selectCoup.val('应用领域')
                        prov.val('=请选择省份=')
                        city.val('=请选择城市=')
                        textarea.val('')
                        alert("{:lang('submit_success')}")
                    }else{
                        alert(res.message)
                    }
                },

            })
        })

    });
</script>
{/block}